Tweak doc style to match crates.io

diff --git a/Makefile.in b/Makefile.in
index 3f685a256c6eab463a5d3f8e2018fa0d7d031068..91704cebc8d15a499dde2b0bcb1e5a2ae3c02d99 100644 (file)
--- a/Makefile.in
+++ b/Makefile.in
@@ -112,7 +112,8 @@ DOC_OPTS := --markdown-no-toc \
                --html-after-content src/doc/footer.html
 ASSETS := CNAME images/noise.png images/forkme.png images/Cargo-Logo-Small.png \
        stylesheets/all.css stylesheets/normalize.css javascripts/prism.js \
-       javascripts/all.js stylesheets/prism.css
+       javascripts/all.js stylesheets/prism.css images/circle-with-i.png \
+       images/search.png
 
 doc: $(foreach doc,$(DOCS),target/doc/$(doc).html) \
        $(foreach asset,$(ASSETS),target/doc/$(asset))

diff --git a/src/doc/footer.html b/src/doc/footer.html
index 0d648dc81e58bf11c2d0c81b01de6f0adb4fcbf0..c2eff8f40dcf5bc7547312940691123b5d305162 100644 (file)
--- a/src/doc/footer.html
+++ b/src/doc/footer.html
@@ -1,11 +1,11 @@
-  <footer>
-    <a href='guide.html'>Guide</a> |
-    <a href='faq.html'>Frequently Asked Questions</a> |
-    <a href='manifest.html'>Manifest Format</a> |
-    <a href='build-script.html'>Build Scripts</a> |
-    <a href='config.html'>Configuration</a>
-  </footer>
 </main>
+<footer>
+<a href='index.html'>Install</a>
+<span class='sep'>|</span>
+<a href='index.html'>Getting Started</a>
+<span class='sep'>|</span>
+<a href='guide.html'>Guide</a>
+</footer>
 
 <script type='text/javascript' src='javascripts/prism.js'></script>
 <script type='text/javascript' src='javascripts/all.js'></script>

diff --git a/src/doc/guide.md b/src/doc/guide.md
index 327820aaf1e987469dfbd99729aa860c280d9511..f6c5a31b3604600460f86e3bc6dc0230e10eda54 100644 (file)
--- a/src/doc/guide.md
+++ b/src/doc/guide.md
@@ -20,7 +20,7 @@ To accomplish this goal, Cargo does four things:
 You can convert an existing Rust project to use Cargo. You'll have to create a
 `Cargo.toml` file with all of your dependencies, and move your source files and
 test files into the places where Cargo expects them to be. See the [manifest
-description](/manifest.html) and the "Cargo Conventions" section below for more
+description](manifest.html) and the "Cargo Conventions" section below for more
 details.
 
 # Creating A New Project
@@ -353,7 +353,7 @@ your code directory or in your home directory).
 
 Inside that file, put this:
 
-```
+```toml
 paths = ["/path/to/project/conduit"]
 ```
 

diff --git a/src/doc/header.html b/src/doc/header.html
index de0b5d270193124fd98a8e97fb6981dfa9fc0dfd..8488444c58ba9e3b84f709db860b6587298442d4 100644 (file)
--- a/src/doc/header.html
+++ b/src/doc/header.html
@@ -1,11 +1,41 @@
+<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
 
 <a href='https://github.com/rust-lang/cargo' class='fork-me'>
   <img src='images/forkme.png'/>
 </a>
-<a href='index.html' class='logo'><img src='images/Cargo-Logo-Small.png'/></a>
+
+<div id="header">
+    <a href='index.html' class='logo'>
+        <img id="logo" height=100 width=100 src='images/Cargo-Logo-Small.png'/>
+    </a>
+    <a href="index.html">
+        <h1>CARGO</h1>
+    </a>
+
+    <div class="search">
+        <form action="https://staging-crates-io.herokuapp.com/search"
+              method="GET">
+            <input name="q" class="search" placeholder="Search crates" type="text"/>
+        </form>
+    </div>
+
+    <div class="nav">
+        <div class="dropdown-container">
+            <button class="dropdown">
+                Documentation
+                <span class="arrow"></span>
+            </button>
+            <ul id="current-user-links" class="dropdown" data-bindattr-503="503">
+                <li><a href='index.html'>Getting Started</a></li>
+                <li><a href='guide.html'>Guide</a></li>
+                <li><a href='faq.html'>FAQ</a></li>
+                <li><a href='manifest.html'>Manifest Format</a></li>
+                <li><a href='build-script.html'>Build Scripts</a></li>
+                <li><a href='config.html'>Configuration</a></li>
+                <li><a href='pkgid-spec.html'>Package ID specs</a></li>
+            </ul>
+        </div>
+    </div>
+</div>
 
 <main>
-  <p>
-    Cargo downloads your <a href="http://rust-lang.org">Rust</a>
-    project's dependencies and builds your project
-  </p>

diff --git a/src/doc/images/circle-with-i.png b/src/doc/images/circle-with-i.png
new file mode 100644 (file)
index 0000000..f9feda4
Binary files /dev/null and b/src/doc/images/circle-with-i.png differ

diff --git a/src/doc/images/search.png b/src/doc/images/search.png
new file mode 100644 (file)
index 0000000..a4814a5
Binary files /dev/null and b/src/doc/images/search.png differ

diff --git a/src/doc/index.md b/src/doc/index.md
index e6c7b4b7b6d3f91a3e0b8a404f8fb70abd0f2613..90ac53ecedb5fcf3023d36e33d86415d55aa586f 100644 (file)
--- a/src/doc/index.md
+++ b/src/doc/index.md
@@ -86,4 +86,4 @@ Hello, world!</code></pre>
 
 # Going Further
 
-For more details on using Cargo, check out the [Cargo Guide](/guide.html)
+For more details on using Cargo, check out the [Cargo Guide](guide.html)

diff --git a/src/doc/javascripts/all.js b/src/doc/javascripts/all.js
index 7951c140de75d2888ca3439070694c7e7dc28549..2694e8fc60ba83704cec7a4d9fd94344c437f557 100644 (file)
--- a/src/doc/javascripts/all.js
+++ b/src/doc/javascripts/all.js
@@ -1,28 +1,36 @@
 //= require_tree .
 
 Prism.languages.toml = {
-  'string': /("|')(\\?.)*?\1/g,
-  'comment': /#.*/,
-  // 'atrule': {
-  //   pattern: /@[\w-]+?.*?(;|(?=\s*{))/gi,
-  //   inside: {
-  //     'punctuation': /[;:]/g
-  //   }
-  // },
-  // 'url': /url\((["']?).*?\1\)/gi,
-  // 'selector': /[^\{\}\s][^\{\};]*(?=\s*\{)/g,
-  // 'property': /(\b|\B)[\w-]+(?=\s*:)/ig,
-  // 'punctuation': /[\{\};:]/g,
-  // 'function': /[-a-z0-9]+(?=\()/ig
-  'number': /\d+/,
-  'boolean': /true|false/,
-  'toml-section': /\[.*\]/,
-  'toml-key': /[\w-]+/
+    // https://github.com/LeaVerou/prism/issues/307
+    'comment': [{
+        pattern: /(^[^"]*?("[^"]*?"[^"]*?)*?[^"\\]*?)(\/\*[\w\W]*?\*\/|(^|[^:])#.*?(\r?\n|$))/g,
+        lookbehind: true
+    }],
+    'string': /("|')(\\?.)*?\1/g,
+    'number': /\d+/,
+    'boolean': /true|false/,
+    'toml-section': /\[.*\]/,
+    'toml-key': /[\w-]+/
 };
 
-(function() {
-  var pres = document.querySelectorAll('pre.rust');
-  for (var i = 0; i < pres.length; i++) {
-    pres[i].className += ' language-rust';
-  }
-})();
+$(function() {
+    var pres = document.querySelectorAll('pre.rust');
+    for (var i = 0; i < pres.length; i++) {
+        pres[i].className += ' language-rust';
+    }
+
+    $('button.dropdown, a.dropdown').click(function(el, e) {
+        $(this).toggleClass('active');
+        $(this).siblings('ul').toggleClass('open');
+
+        if ($(this).hasClass('active')) {
+            $(document).on('mousedown.useroptions', function() {
+                setTimeout(function() {
+                    $('button.dropdown, a.dropdown').removeClass('active');
+                    $('button.dropdown + ul').removeClass('open');
+                }, 150);
+                $(document).off('mousedown.useroptions');
+            });
+        }
+    });
+});

diff --git a/src/doc/manifest.md b/src/doc/manifest.md
index 0acfa476ad08ed10a00370e14332fd2c67745baf..c49521e0e5cc00acc7a795bbf419e0cf54180e33 100644 (file)
--- a/src/doc/manifest.md
+++ b/src/doc/manifest.md
@@ -31,7 +31,7 @@ You can specify a script that Cargo should execute before invoking
 your Rust code, for example. More information can be found in the building
 non-rust code [guide][2]
 
-[1]: http://doc.rust-lang.org/rust.html#external-blocks
+[1]: http://doc.rust-lang.org/reference.html#external-blocks
 [2]: build-script.html
 
 ```toml

diff --git a/src/doc/stylesheets/all.css b/src/doc/stylesheets/all.css
index 2520c6b0f9e910f4737a34f344a1982d45e4354a..bbb3f666c195c27622b761f9b2089bb1f0cb0eb0 100644 (file)
--- a/src/doc/stylesheets/all.css
+++ b/src/doc/stylesheets/all.css
@@ -3,6 +3,8 @@ html {
   background-color: #3b6837;
 }
 
+main, #header { width: 900px; }
+
 body {
   font-family: sans-serif;
 }
@@ -20,8 +22,8 @@ body {
           align-items: center;
 }
 
-a { color: #f3bb00; }
-a:hover { color: #b64790; }
+a { color: #00ac5b; text-decoration: none; }
+a:hover { color: #00793f; }
 
 h1 {
   font-size: 24px;
@@ -35,11 +37,28 @@ h1 code:not(.highlight) {
   vertical-align: bottom;
 }
 h1 a, h2 a { color: #b64790; text-decoration: none; }
+h1:hover a, h2:hover a { color: #A03D7E; }
 h1:hover a:after,
-h2:hover a:after{ content: '\2002\00a7\2002'; }
-h1.title { display: none; } /* hide rustdoc-generated title */
+h2:hover a:after { content: '\2002\00a7\2002'; }
 :target { background: rgba(239, 242, 178, 1); padding: 5px; }
 
+h1.title { /* style rustdoc-generated title */
+    width: 100%;
+    padding: 40px 20px 40px 60px;
+    background-color: #edebdd;
+    margin-bottom: 20px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    -ms-border-radius: 5px;
+    border-radius: 5px;
+    margin: 0;
+    color: #383838;
+    font-size: 2em;
+    background-image: url(../images/circle-with-i.png);
+    background-repeat: no-repeat;
+    background-position: 20px center;
+}
+
 h2 {
   font-size: 18px;
   margin: 15px 0 5px 0;
@@ -66,12 +85,17 @@ main {
 
   background-color: #f9f7ec;
   padding: 15px;
-  border-radius: 5px;
+
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  -ms-border-radius: 10px;
+  border-radius: 10px;
   box-shadow: 0px 0px 5px 2px #3b6837;
+  border: 5px solid #62865f;
+  color: #383838;
 }
 
 main > p:first-child {
-  color: #199b5c;
   font-weight: 500;
   margin-top: 3px;
   padding-bottom: 15px;
@@ -83,7 +107,7 @@ main p:first-child a { color: #3b6837; }
 main p:first-child a:hover { color: #62865f; }
 
 main p, main ul {
-  color: #3b6837;
+  /* color: #3b6837; */
   margin: 10px 0;
   line-height: 150%;
 }
@@ -100,37 +124,46 @@ img.logo {
 pre {
   padding: 10px;
   margin: 10px 0;
-  border: 1px solid #cad0d0;
+  /* border: 1px solid #cad0d0; */
   border-radius: 4px;
   max-width: calc(100vw - 45px);
   overflow-x: auto;
 
-  /* override prism.js styles for fonts */
+  background: #383838 !important;
+  color: white;
+  padding: 20px;
+
+  /* override prism.js styles */
   font-size: 1em !important;
-  background: #eeecdd !important;
+  border: none !important;
+  box-shadow: none !important;
+  text-shadow: none !important;
 }
 
-footer {
-  margin-top: 10px;
-  border-top: 1px solid #b64790;
-  padding-top: 10px;
-  width: 100%;
-  text-align: center;
+pre code {
+  text-shadow: none !important;
+}
 
+footer {
+    padding: 40px;
+    width: 900px;
 }
 footer a {
-  color: #b64790;
-  text-decoration: none;
+    color: white;
 }
 footer a:hover {
-  text-decoration: underline;
+    color: #e6e6e6;
+}
+footer .sep, #header .sep {
+    margin: 0 10px;
+    color: #284725;
 }
 
+
 .headerlink {
   display: none;
   text-decoration: none;
 }
-
 .fork-me {
   position:absolute;
   top:0;
@@ -154,3 +187,99 @@ code span.s1 { color: #2AA198; }
 
 table th { border-bottom: 1px solid black; }
 table td, table th { padding: 5px 10px; }
+
+#header {
+  color: white;
+  position: relative;
+  height: 100px;
+  display: -webkit-flex;
+  display:         flex;
+  -webkit-align-items: center;
+          align-items: center;
+}
+#header h1 { font-size: 2em; }
+#header a, #header h1 { color: white; text-decoration: none; }
+#header a:hover { color: #d9d9d9; }
+
+#header input.search {
+    border: none;
+    color: black;
+    outline: 0;
+    margin-left: 30px;
+    padding: 5px 5px 5px 25px;
+    background-image: url(../images/search.png);
+    background-repeat: no-repeat;
+    background-position: 6px 6px;
+    -webkit-border-radius: 15px;
+    -moz-border-radius: 15px;
+    -ms-border-radius: 15px;
+    border-radius: 15px;
+}
+
+#header .nav {
+    -webkit-flex-grow: 2;
+    flex-grow: 2;
+    text-align: right;
+}
+
+button.dropdown, a.dropdown { cursor: pointer; }
+button.dropdown .arrow, a.dropdown .arrow {
+    font-size: 50%; display: inline-block; vertical-align: middle;
+}
+button.dropdown .arrow::after, a.dropdown .arrow::after { content: "▼"; }
+button.active.dropdown .arrow::after, a.active.dropdown .arrow::after {
+    content: "▲";
+}
+
+button {
+    background: none;
+    outline: 0;
+    border: 0;
+    padding: 10px;
+    color: white;
+}
+
+ul.dropdown {
+    display: none;
+    visibility: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    opacity: 0;
+    margin: 0;
+    text-align: left;
+    padding: 0;
+    background: white;
+    border: 1px solid #d5d3cb;
+    list-style: none;
+    z-index: 10;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    -ms-border-radius: 5px;
+    border-radius: 5px;
+}
+
+ul.dropdown li a {
+    font-size: 90%;
+    width: 100%;
+    display: inline-block;
+    padding: 8px 10px;
+    text-decoration: none;
+    color: #383838 !important;
+}
+
+ul.dropdown li a:hover {
+    background: #5e5e5e;
+    color: white !important;
+}
+ul.dropdown li.last { border-top: 1px solid #d5d3cb; }
+ul.dropdown.open {
+    display: block;
+    visibility: visible;
+    opacity: 1;
+}
+.dropdown-container {
+    display: inline-block;
+    position: relative;
+}

diff --git a/src/doc/stylesheets/prism.css b/src/doc/stylesheets/prism.css
index 6cc4523c5f5274ad5fec355e57d4b41ad2b20c2f..d80a94102841d41ea468c78d08090dacdb6271da 100644 (file)
--- a/src/doc/stylesheets/prism.css
+++ b/src/doc/stylesheets/prism.css
@@ -1,17 +1,16 @@
-/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript */
+/* http://prismjs.com/download.html?themes=prism-twilight&languages=markup+css+clike+javascript */
 /**
- * prism.js default theme for JavaScript, CSS and HTML
- * Based on dabblet (http://dabblet.com)
- * @author Lea Verou
+ * prism.js Twilight theme
+ * Based (more or less) on the Twilight theme originally of Textmate fame.
+ * @author Remy Bach
  */
-
 code[class*="language-"],
 pre[class*="language-"] {
-       color: black;
-       text-shadow: 0 1px white;
-       font-family: Consolas, Monaco, 'Andale Mono', monospace;
+       color: white;
        direction: ltr;
+       font-family: Consolas, Monaco, 'Andale Mono', monospace;
        text-align: left;
+       text-shadow: 0 -.1em .2em black;
        white-space: pre;
        word-spacing: normal;
        word-break: normal;
@@ -27,100 +26,104 @@ pre[class*="language-"] {
        hyphens: none;
 }
 
-pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
-code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
-       text-shadow: none;
-       background: #b3d4fc;
-}
-
-pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
-code[class*="language-"]::selection, code[class*="language-"] ::selection {
-       text-shadow: none;
-       background: #b3d4fc;
-}
-
-@media print {
-       code[class*="language-"],
-       pre[class*="language-"] {
-               text-shadow: none;
-       }
+pre[class*="language-"],
+:not(pre) > code[class*="language-"] {
+       background: hsl(0, 0%, 8%); /* #141414 */
 }
 
 /* Code blocks */
 pre[class*="language-"] {
-       padding: 1em;
+       border-radius: .5em;
+       border: .3em solid hsl(0, 0%, 33%); /* #282A2B */
+       box-shadow: 1px 1px .5em black inset;
        margin: .5em 0;
        overflow: auto;
+       padding: 1em;
 }
 
-:not(pre) > code[class*="language-"],
-pre[class*="language-"] {
-       background: #f5f2f0;
+pre[class*="language-"]::selection {
+       /* Safari */
+       background: hsl(200, 4%, 16%); /* #282A2B */
+}
+
+pre[class*="language-"]::selection {
+       /* Firefox */
+       background: hsl(200, 4%, 16%); /* #282A2B */
+}
+
+/* Text Selection colour */
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+       text-shadow: none;
+       background: hsla(0, 0%, 93%, 0.15); /* #EDEDED */
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+       text-shadow: none;
+       background: hsla(0, 0%, 93%, 0.15); /* #EDEDED */
 }
 
 /* Inline code */
 :not(pre) > code[class*="language-"] {
-       padding: .1em;
        border-radius: .3em;
+       border: .13em solid hsl(0, 0%, 33%); /* #545454 */
+       box-shadow: 1px 1px .3em -.1em black inset;
+       padding: .15em .2em .05em;
 }
 
 .token.comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
-       color: slategray;
+       color: hsl(0, 0%, 47%); /* #777777 */
 }
 
 .token.punctuation {
-       color: #999;
+       opacity: .7;
 }
 
 .namespace {
        opacity: .7;
 }
 
-.token.property,
 .token.tag,
 .token.boolean,
 .token.number,
-.token.constant,
-.token.symbol,
 .token.deleted {
-       color: #905;
+       color: hsl(14, 58%, 55%); /* #CF6A4C */
 }
 
+.token.keyword,
+.token.property,
 .token.selector,
+.token.constant,
+.token.symbol,
+.token.builtin {
+       color: hsl(53, 89%, 79%); /* #F9EE98 */
+}
+
 .token.attr-name,
+.token.attr-value,
 .token.string,
 .token.char,
-.token.builtin,
-.token.inserted {
-       color: #690;
-}
-
 .token.operator,
 .token.entity,
 .token.url,
 .language-css .token.string,
 .style .token.string,
-.token.variable {
-       color: #a67f59;
-       background: hsla(0, 0%, 100%, .5);
-}
-
-.token.atrule,
-.token.attr-value,
-.token.keyword {
-       color: #07a;
+.token.variable,
+.token.inserted {
+       color: hsl(76, 21%, 52%); /* #8F9D6A */
 }
 
-.token.function {
-       color: #DD4A68;
+.token.atrule {
+       color: hsl(218, 22%, 55%); /* #7587A6 */
 }
 
 .token.regex,
 .token.important {
-       color: #e90;
+       color: hsl(42, 75%, 65%); /* #E9C062 */
 }
 
 .token.important {
@@ -131,3 +134,64 @@ pre[class*="language-"] {
        cursor: help;
 }
 
+pre[data-line] {
+       padding: 1em 0 1em 3em;
+       position: relative;
+}
+
+/* Markup */
+.language-markup .token.tag,
+.language-markup .token.attr-name,
+.language-markup .token.punctuation {
+       color: hsl(33, 33%, 52%); /* #AC885B */
+}
+
+/* Make the tokens sit above the line highlight so the colours don't look faded. */
+.token {
+       position: relative;
+       z-index: 1;
+}
+
+.line-highlight {
+       background: -moz-linear-gradient(left, hsla(0, 0%, 33%, .1) 70%, hsla(0, 0%, 33%, 0)); /* #545454 */
+       background: -o-linear-gradient(left, hsla(0, 0%, 33%, .1) 70%, hsla(0, 0%, 33%, 0)); /* #545454 */
+       background: -webkit-linear-gradient(left, hsla(0, 0%, 33%, .1) 70%, hsla(0, 0%, 33%, 0)); /* #545454 */
+       background: hsla(0, 0%, 33%, 0.25); /* #545454 */
+       background: linear-gradient(left, hsla(0, 0%, 33%, .1) 70%, hsla(0, 0%, 33%, 0)); /* #545454 */
+       border-bottom: 1px dashed hsl(0, 0%, 33%); /* #545454 */
+       border-top: 1px dashed hsl(0, 0%, 33%); /* #545454 */
+       left: 0;
+       line-height: inherit;
+       margin-top: 0.75em; /* Same as .prism’s padding-top */
+       padding: inherit 0;
+       pointer-events: none;
+       position: absolute;
+       right: 0;
+       white-space: pre;
+       z-index: 0;
+}
+
+.line-highlight:before,
+.line-highlight[data-end]:after {
+       background-color: hsl(215, 15%, 59%); /* #8794A6 */
+       border-radius: 999px;
+       box-shadow: 0 1px white;
+       color: hsl(24, 20%, 95%); /* #F5F2F0 */
+       content: attr(data-start);
+       font: bold 65%/1.5 sans-serif;
+       left: .6em;
+       min-width: 1em;
+       padding: 0 .5em;
+       position: absolute;
+       text-align: center;
+       text-shadow: none;
+       top: .4em;
+       vertical-align: .3em;
+}
+
+.line-highlight[data-end]:after {
+       bottom: .4em;
+       content: attr(data-end);
+       top: auto;
+}
+